<template>
  <el-card class="footer_fields_card" v-if="isShowCard" shadow="never">
    <el-row>
      <span
        v-for="item in fieldsItems"
        :key="item.prop"
      >{{ item.label }}：{{ getShowText(item) }}
      </span>
    </el-row>
  </el-card>
</template>
<script>
export default {
  props: {
    fieldsItems: {
      type: Array,
      default: () => []
    },
    fieldsData: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    isShowCard () {
      return Object.keys(this.fieldsData).length !== 0
    }
  },
  methods: {
    getShowText (fieldItem) {
      const text = this.fieldsData[fieldItem.prop] ?? ''
      return text
    }
  }
}
</script>
<style lang="less" scoped>
.footer_fields_card {
  margin-top: 10px;
  span {
    display: inline-block;
    margin-right: 30px;
  }
}
</style>
